<template>
<transition name="fdx-fade-in">
  <div class="fdx-mask" v-show="currentValue" @click="close">
  </div>
</transition>
</template>
<script type="text/ecmascript-6">
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },

  methods: {
    close() {
      this.currentValue = false
      this.$emit('input', this.currentValue)
    }
  },
  watch: {
    value: function(newVal) {
      this.currentValue = newVal
    }
  }
}
</script>
<style  lang="scss">
.fdx-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 1);
  z-index: 2000;
}
</style>
